<template>
  <el-card class="box-card">
    <el-button round>新增仓库</el-button>
    <el-table :data="tableInfo.records" style="width: 100%">
      <el-table-column
        v-for="(item,id) in rules"
        :key="id"
        :prop="item.prop"
        :label="item.name"
        width="180"
      />
      <slot name="operate"></slot>
    </el-table>
  </el-card>
  <!-- <div>{{rules}}</div> -->

  <div class="demo-pagination-block" >
    <el-pagination
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="Number(tableInfo.total)"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  props: {
    tableInfo: {
      type: Object,
      default: () => ({})
    },
    rules: {
      type: Array,
      default: () => []
    }
  },
  setup (props, { emit }) {
    // console.log(props.tableInfo.total)
    // const prop1 = computed(() => {
    //   return props.tableInfo
    // })
    // console.log(ref(prop1.value))
    // console.log(props.tableInfo)
    const currentPage = ref(1)
    const pageSize = ref(10)
    const small = ref(false)
    const background = ref(false)
    const disabled = ref(false)
    const handleSizeChange = val => {
      console.log(`${val} items per page`)
    }
    const handleCurrentChange = val => {
      // console.log(`current page: ${val}`)
      emit('changePageFn', { current: currentPage.value, size: pageSize.value })
    }
    return {
      currentPage,
      pageSize,
      small,
      background,
      disabled,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style>
.demo-pagination-block{
  width: 600px;
  margin: 10px auto;
}
</style>
